打造 Material 颜色主题 | 设计篇

作者 / Liam Spradlin, Material Design Advocate

颜色是设计中最清晰的表现形式之一，尤其是当您需要在人们的各种活动场合中传播您的品牌或产品形象时。应用的界面可容纳丰富的颜色，不仅可以用于打造产品形象，而且由于用户可以直接触摸和操作界面，因此在传播产品形象的同时又能与用户的生活和体验紧密联系，并增强产品的功能、实用性和个性。

Material Design 包含全面的颜色系统，可以让设计师和开发者制定全局颜色决策，并能够有效管理界面状态、强调重点和对比度等问题，使这些颜色决策贯穿于产品的各个层级。

Material 中的颜色

为了实现上述目标，Material 使用一组定义好的颜色取值，构成 "颜色主题"。颜色主题包含主要 (Primary) 颜色和次要 (Secondary) 颜色，它们可用于关键组件，另外还包含用于自定义背景 (Background) 色、表面 (Surface) 颜色 (用于呈现抬升的表面或 "纸张") 和错误 (Error) 颜色的色值。

△ 基准 Material 颜色主题

还有一些色值用于 "On" 颜色，顾名思义，它们是出现在其他元素上方的颜色。例如，On Primary 可用于呈现在应用的主要颜色上方显示的文本、图标或其他元素。比如下图展示了带有菜单图标和标题的应用栏，其中的图表和文字都使用 "On" 颜色来确保内容具备适当的对比度和可读性。

对于诸如状态等更加细微的颜色使用场景，Material 使用 "色调调色板"。色调调色板会基于您所选择的颜色提供一组十个值，提供了减淡和加深的选项，可使您的颜色主题更加灵活。

△ 上图中的界面使用主要颜色以及两个主要颜色变体，并应用到所有组件中

选择品牌颜色

从头开始

如果您要从头开始构建颜色主题，也就是说如果您没有现成的品牌调色板，那么最好先充分思考您应用的特质。在我们的 Material Studies 专栏 (基于现实用例和产品约束设计的示例应用) 中，您可以看到根据各种应用的功能和个性所采用的多种基于颜色的品牌化方案。

• Material Studies
  https://material.io/design/material-studies/about-our-material-studies.html

您的应用是否像暗色调的个人理财应用 Rally 一样，是一款可以帮助人们高效解析信息的实用工具？是否像现代而精致的购物应用 Shrine 一样，能够以精致的美学和粉红色调激发用户的兴趣？或者，也许像教育应用 Owl 一样，能够通过生动的配色来提供更加有趣的教学体验。在每个用例中，颜色在打造和增强应用的个性方面都起着重要作用。

△ Rally 的每个信息图表都使用了两种取自其颜色主题的颜色

对于像 Rally 这样的应用而言，其功能旨在查看和管理个人财务数据，因此必须选用一种深沉的配色方案。该应用的主要颜色为绿色，On 颜色为白色，背景色则为深灰色调。其他颜色均极为深沉，用于在各种信息展示界面中以实用的方式呈现数据。

• Rally

  https://material.io/design/material-studies/rally.html

△ Owl 使用三种颜色主题来区分应用中的不同部分

与 Rally 截然相反，Owl 通过在其颜色主题中使用三种不同的主要颜色，打造出鲜活有趣的使用氛围。尽管 Owl 事实上可以被视为在同一个应用中采用了三种不同的颜色主题，但这些颜色却因生动鲜明的共同特征而紧密关联 (它们各自趋近色轮中的三原色: 红、黄、蓝)。

• Owl
  https://material.io/design/material-studies/owl.html

△ Shrine 在关健组件和版面设计中采用了简单的颜色主题

Shrine 则介于以上两款应用之间。这款应用具有个性鲜明的色彩表现，使用奶油粉色调作为主要颜色和次要颜色，并使用深棕色作为 On 颜色。虽然 Shrine 的调色板十分独特，但在应用中以专注而精致的方式应用这种色调，能够体现出 Shrine 想要展现的个性形象，打造出一个现代而优雅的时尚和生活购物助手。

• Shrine
  https://material.io/design/material-studies/shrine.html

从头开始制作自己的主题时，请考虑您的应用在上述示例所覆盖的范围中所处的位置。首先，请选择一种能够最贴切地表达应用个性和用途的主要颜色。然后，根据您对应用观感的设想，选择可以增强或调节这些特质的次要颜色。请考虑如何使用 On 颜色，或对表面或背景应用新的颜色以增强表现力。

如果您已有品牌调色板

在为您的应用构建颜色主题时，您可能已经具有可以轻松转换为 Material 颜色主题的品牌调色板。这种情况下，您可能已经拥有品牌指南，其中涵盖了应优先考虑的颜色以及如何概念化品牌个性或色调方面的内容。您可以将指南内容与前文提到的信息相结合，确定要在颜色主题中包含哪些颜色。

如果您已有品牌调色板但没有指南，请浏览现有的品牌物料或界面设计，然后与调色板进行对比，确定应优先考虑采用哪些颜色作为主要颜色和次要颜色。测试这些颜色以确定它们是否能带来方便阅读的对比度。如果效果不佳，您可以从色调调色板中选择效果理想的颜色变体。

• 测试颜色
  https://material.io/tools/color

使用调色板生成器扩展调色板

基于确定下来的几种颜色，可以使用调色板生成器对颜色取值进行扩展，从而满足更多场合的需求。只需在生成器右侧添加所选颜色，然后点击每个生成的色样即可复制其十六进制色值。

• 调色板生成器
  https://material.io/design/color/the-color-system.html#tools-for-picking-colors

呈现主题

选择一些颜色并将其扩展为色调调色板后，您就可以通过将颜色代入到 Material Design 提供的色谱中来实际创建颜色主题了。

• 色调调色板

  https://material.io/design/color/the-color-system.html#tools-for-picking-colors

要在设计工具中进行此操作 (并在 Material Components 上获得主题的即时预览)，请下载我们的 Figma 基准设计工具包。在工具包内的 Material Theme 页面中，您将看到一个名为 Color 的框架，该框架全面展示了您的颜色主题，包括了色调调色板。

• Figma 基准设计工具包
  https://www.figma.com/@materialdesign

在上图右侧，您会看到一个面板，在 Color Styles 下方包含了与主题中的颜色相符的全局样式。要开始将颜色插入到主题中，请点击每种颜色样式旁边的编辑图标。返回到生成器中的色调调色板，然后点击工具中的每个色样以复制其十六进制色值，然后将其输入到 Figma 中您选择的样式中。 

当主要颜色和次要颜色的色样处理完成后，请查看 Figma 界面左边的 Stickersheet 页面以查看主题在每个组件上的显示效果。

下一步: 实现

完成了上述操作后，您还可以尝试调整表面、背景和错误颜色来优化这个全新的颜色主题。您也可以尝试通过创建多个主题 (例如上文中的 Owl 示例) 来利用颜色系统实现更多创意。

在创建出完美的颜色主题后，您就可以准备实现它了。请大家关注我们接下来会发布的文章《打造 Material 颜色主题 | 实现篇》。

---

推荐阅读

 点击屏末 | 阅读原文 | 查看 Material Design 设计指南

---